<template>
  <div class="single-entry">
    <el-form inline label-width="5em">
      <el-form-item label="分类">
        <el-input v-model="classify.name" disabled />
      </el-form-item>
      <el-form-item label="题型">
        <el-select v-model="questionType" :disabled="!!question.id">
          <el-option
            v-for="(item, index) in questionTypeList"
            :key="item"
            :label="item"
            :value="index + 1"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <el-divider />

    <component :is="names[questionType - 1]" @submit="submit" />
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { addOrEditQuestion } from "@/api2/question";

export default {
  components: {
    singleChoice: () => import("../components/singleChoice"),
    multipleChoice: () => import("../components/multipleChoice"),
    trueFalse: () => import("../components/trueFalse"),
    gapFilling: () => import("../components/gapFilling"),
    shortAnswer: () => import("../components/shortAnswer"),
  },
  props: {
    classify: {
      type: Object,
      default: () => ({}),
      require: true,
    },
  },
  inject: ["question"],
  data() {
    return {
      questionTypeList: ["单选题", "多选题", "判断题", "填空题", "简答题"],
      questionType: undefined,
      names: [
        "singleChoice",
        "multipleChoice",
        "trueFalse",
        "gapFilling",
        "shortAnswer",
      ],
    };
  },
  mounted() {
    this.questionType = this.question.type || 1;
  },
  methods: {
    ...mapMutations('project', ['IS_INCLUDE']),
    async submit(data, cb) {
      const { correctArray, ...form } = data;
      if (this.questionType == 2) {
        this.$set(form, "correct", correctArray.join());
      }
      const params = {
        questionType: this.questionType,
        questionKindId: this.classify.id,
        ...form,
      };
      await addOrEditQuestion(params);
      this.IS_INCLUDE(false)
      this.$message.success(this.question.id ? "修改成功" : "录入成功");
      cb();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form--inline .el-form-item {
  margin-bottom: 0;
}
</style>
